<template>
  <div>
    <!-- 带缓存

依赖项不变,直接从缓存取

依赖项改变,函数自动执行并重新缓存 -->
    <p>{{ reserveMsg }}</p>
    <p>{{ reserveMsg }}</p>
    <p>{{ reserveMsg }}</p>

    <hr />
    <p>{{ reserveMsgFn() }}</p>
    <p>{{ reserveMsgFn() }}</p>
    <p>{{ reserveMsgFn() }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello,world",
    };
  },
  // 通过计算属性定义一个翻转的计算属性
  computed: {
    reserveMsg() {
      console.log("我是计算属性,我被触发了");
      return this.msg.split("").reverse().join("");
    },
  },
  methods: {
    reserveMsgFn() {
      console.log("我是methods方法,我被触发了");
      return this.msg.split("").reverse().join("");
    },
  },
};
</script>

<style>
</style>